<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生总分信息</title>
    <link rel="stylesheet" href="element.css">
</head>
<body>
<div id="stu">
    <h2>学生信息总分</h2>
    <el-table
            :data="stuSumScoreData"
            stripe
            style="width: 100%">
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="180">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="clazz"
                label="班级">
        </el-table-column>
        <el-table-column
                prop="sumScore"
                label="总分">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            :page-size="pageSize"
            :pager-count="11"
            layout="prev, pager, next"
            :total="totalElements"
            :current-page.sync="pageNum"
            @current-change="loadTable">
    </el-pagination>

</div>

<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<script src="element.js"></script>
<script>
    new Vue({
      el: '#stu',
      data:{
        stuSumScoreData:[],
        pageSize:10,
        pageNum:1,
        totalElements:0
      },
      // 在页面被创建的时候会执行一次
      created(){
        this.loadTable();
      },
      methods:{
        loadTable(){
            $.get("/stuSumScore/page?pageSize="+this.pageSize+"&pageNum="+this.pageNum).then(res=>{
                this.stuSumScoreData = res.data.content;
                this.totalElements = res.data.totalElements;
            });
        },
        del(id){
            // 向后端发起一个delete请求，根据id进行删除
            $.ajax({
                url: '/stuSumScore/del/'+id,
                type: 'delete',
                contentType: 'application/json'
            }).then(res=>{
                if(res.code==='200'){
                    this.loadTable();
                }
            })
        },
        func3(){
        },
        func4(){
        }

      }
    });

</script>


</body>
</html>